<template lang="html">
  <div class="mainFirst main-container">
    <el-container>
      <el-aside width="256px">
        <div class="left-list-bg">
          <ul class="left-list">
            <li v-for="item of list" :key="list.letter">
              <router-link :to="'/publish/'+item.letter"
              tag="a">
                {{ item.letter }} {{item.publishName }}
              </router-link>
            </li>
        </ul>
        </div>
      </el-aside>
      <div class="rig-main">
        <el-main>
          <el-row :gutter="20">
            <el-col :span="18">
                <img src="static/image/banner.png" alt="" width="100%">
            </el-col>
            <el-col :span="6">
              <div class="rig-login">
                <img src="static/image/header.png" alt="">
                <p>Hi,欢迎您</p>
                <div class="index-btn">
                  <button type="button" name="button">登&nbsp;&nbsp;&nbsp;录</button>
                  <button type="button" name="button">采选车</button>
                  <button type="button" name="button">采选平台</button>
                  <button type="button" name="button">我的订单</button>
                  <!-- <button type="button" name="button">退&nbsp;&nbsp;&nbsp;出</button> -->
                </div>
              </div>
            </el-col>
          </el-row>
          <div class="mg-top">
            <el-row :gutter="20">
              <el-col :span="8">
                <div class="grid-content">
                  <div class="bg-colo-ff">
                    <div class="desc-left">
                      <span class="new-publish">最新出版</span>
                      <p class="text-gary">展示所有最新出版图书，让您的图书馆资源实时更新。</p>
                    </div>
                    <div class="rg-img">
                      <img src="static/image/book1.png" alt="">
                    </div>
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content">
                  <div class="bg-colo-ff">
                    <div class="desc-left">
                      <span class="hot-pick">热门采选</span>
                      <p class="text-gary">展示所有最新出版图书，让您的图书馆资源实时更新。</p>
                    </div>
                    <div class="rg-img">
                      <img src="static/image/book2.png" alt="">
                    </div>
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content">
                  <div class="grid-content">
                    <div class="bg-colo-ff">
                      <div class="desc-left">
                        <span class="best-seller-book">零售图书</span>
                        <p class="text-gary">展示所有最新出版图书，让您的图书馆资源实时更新。</p>
                      </div>
                      <div class="rg-img">
                        <img src="static/image/book3.png" alt="">
                      </div>
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
            <div class="bg-ff-publish">
              <el-row>
                  <el-col :span="24">
                    <div class="grid-content">
                      <a href="#">
                        <img src="static/image/icon4.png" alt="">
                        <span class="publish-recomed">出版社推荐</span>
                      </a>
                      <ul>
                        <li>
                          <img src="static/image/img1.png" alt="">
                        </li>
                        <li>
                          <img src="static/image/img2.png" alt="">
                        </li>
                        <li>
                          <img src="static/image/img3.png" alt="">
                        </li>
                        <li>
                          <img src="static/image/img4.png" alt="">
                        </li>
                        <li>
                          <img src="static/image/img5.png" alt="">
                        </li>
                        <li>
                          <img src="static/image/img6.png" alt="">
                        </li>
                        <li>
                          <img src="static/image/img7.png" alt="">
                        </li>
                        <li>
                          <img src="static/image/img8.png" alt="">
                        </li>
                      </ul>
                    </div>
                  </el-col>
              </el-row>
            </div>
          </div>
        </el-main>
      </div>
    </el-container>
  </div>
</template>

<script>
//const url = require("assets/logo-bg.png");
export default {
  name: 'mainFirst',
  props: {
    list: Array
  }
}

</script>

<style lang="scss" scoped>
.left-list-bg{
  background-color: #fff;
  padding:10px 0;
}
  .main-container {
    width: 1280px;
    margin: auto;
  }
  .left-list {
    min-height:29rem;
    li {
      line-height:1.5rem;
    }
    a {
      font-size:0.7rem;
      display: inline-block;
      width: 90%;
      text-align: left;
      padding-left: 1rem;
      &:hover{
        color: #c33122;
      }
    }
  }
  .rig-main{
    margin-top:-15px;
  }
  .rig-login {
    background: url(/static/image/logo-bg.png);
    width: 100%;
    height: 11.6rem;
    background-attachment: fixed;
    padding-top:1.5rem;
    p {
      font-size: .7rem;
      padding-top:.5rem;
    }
    button {
      width:4rem;
      height:1.5rem;
      line-height: 1.5rem;
      background-color: #c33122;
      color:#fff;
      text-align: center;
      border:none;
      border-radius: .2rem;
      margin-top:1rem;
      &:hover{
        background-color: #cc594d;
        cursor: pointer;
      }
    }
  }
  .mg-top {
    margin-top: 1rem;
  }
  .bg-colo-ff{
    background-color: #fff;
    padding:1rem;
    display: flex;
    p {
      font-size: .7rem;
      color: #999;
      line-height: 1rem;
      padding-top:1rem;
      text-align: left;
    }
    span {
      font-size:.9rem;
      font-weight: bold;
      display: inline-block;
      width: 100%;
      text-align: left;
    }
    .new-publish {
        color: #24b9d9;
    }
    .hot-pick {
      color: #df484a;
    }
    .best-seller-book {
      color: #b630ce;
    }
    &:hover {
        box-shadow: 0px 0px 2px 2px rgba(71, 121, 141, .2);
    }
  }
  .bg-ff-publish {
    background-color: #fff;
    padding:1rem;
    margin-top:1rem;
    ul {
      padding-top:1rem;
    }
    ul li {
      float: left;
      height: 4rem;
      line-height:4rem;
      padding-bottom: .1rem;
      img {
        width:90%;
      }
      &:hover {
        box-shadow: 0px 0px 2px 2px rgba(71, 121, 141, .2);
      }
    }
  }
  .publish-recomed {
    display: inline-block;
    padding-left: .4rem;
    font-size: .8rem;
    font-weight: bold;
    line-height: 1.2rem;
    letter-spacing: 2px;
    color: #2d2c2c;
    vertical-align: top;
  }
</style>
